<template>
  <view class="confirm-appoint-page">
    <view class="detail-img-box">
      <image class="detail-img" :src="img_api + ticketPics"></image>
    </view>
    <view class="authentication" v-if="info.scenicAuth != 0">
      <view class="left">
        <view class="title">预定当前门票需完成账号信息认证</view>
        <view class="field-list">
          <view class="field-item" v-if="authType.needAuthPhone">
            <view class="field-name">手机号</view>

            <!-- 0 是已认证 -->
            <image
              :src="`https://ltjt.sjzballsportpark.com/statics/tyc/static/${
                userInfo.phoneAuth == '0' ? 'dui' : 'cha'
              }.png`"
            ></image>
          </view>
          <view class="field-item" v-if="authType.needAuthIDCard">
            <view class="field-name">实名</view>

            <!-- 0 是已认证 -->
            <image
              :src="`https://ltjt.sjzballsportpark.com/statics/tyc/static/${
                userInfo.idcodeAuth == '0' ? 'dui' : 'cha'
              }.png`"
            ></image>
          </view>
          <view class="field-item" v-if="authType.needAuthFace">
            <view class="field-name">人脸</view>

            <!-- 0 是已认证 -->
            <image
              :src="`https://ltjt.sjzballsportpark.com/statics/tyc/static/${
                userInfo.faceAuth == '0' ? 'dui' : 'cha'
              }.png`"
            ></image>
          </view>
        </view>
      </view>
      <view
        class="right"
        v-if="isShowAuthBtn"
        @click="toURL('/page_my/authentication/list', { form: '1' })"
      >
        <view class="auth-btn">去认证</view>
      </view>
    </view>

    <view class="appiont-day-box">
      <view class="top">
        <view class="top-txt">预约日期</view>
        <view class="top-txt">预约门票</view>
      </view>
      <view class="bottom">
        <view class="left">
          <view class="day">{{ appointmentDate.day }}</view>
          <view class="weeks">{{ appointmentDate.week }}</view>
        </view>
        <view class="right">
          <view class="type">{{ ticketInfo.typeName }}</view>
          <view class="num">1张</view>
        </view>
      </view>
    </view>
    <view class="count-price-box">
      <view class="txt">合计金额</view>
      <view class="count-price">￥{{ ticketInfo.typePrice }}</view>
    </view>
    <view class="btn-box">
      <view class="appointment-btn" @click="confirmReserve">立即预订</view>
    </view>
  </view>
</template>

<script>
import { addTicOrder, orderIdBykey } from "@/config/api.js";
import { payTransactions } from "@/utils";

export default {
  data() {
    return {
      ticketPics: "",
      ticketInfo: {},
      appointmentDate: {},
      info: {},
      isSubmitting: false,
    };
  },
  computed: {
    authType() {
      return {
        needAuthPhone: [1, 2, 3].includes(Number(this.info.scenicAuth)),
        needAuthIDCard: [2, 3].includes(Number(this.info.scenicAuth)),
        needAuthFace: [3].includes(Number(this.info.scenicAuth)),
      };
    },
    isShowAuthBtn() {
      return (
        (this.authType.needAuthPhone && this.userInfo.phoneAuth == "1") ||
        (this.authType.needAuthIDCard && this.userInfo.idcodeAuth == "1") ||
        (this.authType.needAuthFace && this.userInfo.faceAuth == "1")
      );
    },
  },
  onLoad() {
    const { ticketPics, ticketList, appointmentDate, detail } =
      this.$store.state.activeReserveInfo;
    this.ticketPics = ticketPics;
    this.ticketInfo = ticketList[0];
    this.appointmentDate = appointmentDate[0];
    this.info = detail;
  },
  methods: {
    confirmReserve() {
      if (this.isSubmitting) {
        uni.showToast({ title: "正在拉起支付", icon: "none" });
        return;
      }
      if (this.isShowAuthBtn) {
        uni.showToast({ title: "需要完成认证才可预定", icon: "none" });
        return;
      }
      this.isSubmitting = true;
      return addTicOrder({
        ticOederAddDTO: {
          orderTicketType: this.info.ticketType,
          ticketId: this.info.ticketId,
          stcokDate: this.appointmentDate.stockDate,
        },
        ticOrderDetailAddDTOList: [
          {
            orderTicketType: this.info.ticketType,
            ticketId: this.info.ticketId,
            ticConfigId: this.ticketInfo.ticConfigId,
            goodPic: this.ticketPics,
            ticketTypeId: this.ticketInfo.ticTypeId,
            ticketCount: 1,
          },
        ],
      }).then(({ code, msg }) => {
        if (code === 200) {
          return this.getOrderIdBykey(msg).finally(() => {
            this.isSubmitting = false;
          });
        } else {
          this.isSubmitting = false;
        }
      });
    },
    getOrderIdBykey(id) {
      return orderIdBykey({
        _id: id,
      }).then(({ code, data: orderId }) => {
        if (code === 200 && orderId) {
          if (Number(this.ticketInfo.typePrice) === 0) {
            this.toURL(
              "/page_index/appointment/result",
              { state: 1, id: orderId },
              { type: "redirect" }
            );
            return Promise.resolve();
          }
          return this.getPayOrderInfo(orderId);
        } else {
          return uni.$u.sleep(300).then(() => {
            return this.getOrderIdBykey(id);
          });
        }
      });
    },
    // 支付前获取订单详细
    getPayOrderInfo(orderId) {
      return payTransactions(orderId)
        .then(() => {
          this.toURL(
            "/page_index/appointment/result",
            { state: 1, id: orderId },
            { type: "redirect" }
          );
        })
        .catch(({ code }) => {
          this.toURL(
            "/page_index/appointment/result",
            { state: 0, id: orderId },
            { type: "redirect" }
          );
        });
    },
  },
};
</script>

<style lang="scss">
.confirm-appoint-page {
  padding: 24rpx 0;

  .detail-img-box {
    margin: 0 auto;
    width: 686rpx;
    height: 320rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .detail-img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
  }

  .authentication {
    margin: 16rpx 32rpx 0;
    display: flex;
    align-items: center;
    background: #f9f4f2;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 2rpx solid #ff5000;
    box-sizing: border-box;
    padding: 24rpx;

    .left {
      flex: 1;

      .title {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 40rpx;
      }

      .field-list {
        display: flex;
        align-items: center;
        margin-top: 16rpx;

        .field-item {
          margin-right: 24rpx;
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.8);
          line-height: 40rpx;

          image {
            display: block;
            width: 32rpx;
            height: 32rpx;
            margin-left: 6rpx;
          }
        }
      }
    }

    .right {
      margin-left: 24rpx;
      width: 132rpx;
      height: 64rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #ff5000;
      line-height: 32rpx;
    }
  }

  .appiont-day-box {
    padding: 32rpx 0;
    margin: 0 40rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16rpx;
    }

    .top-txt {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 40rpx;
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left,
      .right {
        display: flex;
        align-items: center;
      }

      .day {
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 50rpx;
        padding-right: 8rpx;
      }

      .weeks {
        background: rgba(255, 80, 0, 0.102);
        border-radius: 2rpx 2rpx 2rpx 2rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #ff5000;
        padding: 0 4rpx;
        line-height: 32rpx;
      }

      .type {
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 50rpx;
        padding-right: 8rpx;
      }

      .num {
        background: #ff5000;
        border-radius: 2rpx 2rpx 2rpx 2rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #ffffff;
        padding: 0 4rpx;
        line-height: 32rpx;
      }
    }
  }

  .count-price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 34rpx 40rpx 0;

    .txt {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 40rpx;
    }

    .count-price {
      font-size: 40rpx;
      font-weight: 700;
      color: #ff5000;
      line-height: 44rpx;
    }
  }

  .btn-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100, 100, 111, 0.2);
    height: 120rpx;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;

    .appointment-btn {
      width: 686rpx;
      height: 80rpx;
      background: #ff5000;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      margin: 0 auto;
      text-align: center;
      font-size: 28rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 80rpx;
    }
  }
}
</style>
